<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内容池管理</title>
    <!-- 固定样式引入 - 不可修改路径 -->
    <!-- 引入React和ReactDOM -->
    <script src="/libs/react.development.js"></script>
    <script src="/libs/react-dom.development.js"></script>

    <!-- 引入Material-UI核心依赖 -->
    <script src="/libs/material-ui.development.js"></script>
    <script src="/libs/emotion-react.umd.min.js"></script>
    <script src="/libs/emotion-styled.umd.min.js"></script>

    <!-- 引入Babel用于解析JSX -->
    <script src="/libs/babel.min.js"></script>

    <!-- 引入Material图标（可选） -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="/pages/app.css">
</head>

<body>
    <div id="root"></div>

    <!-- 固定脚本引入 - 不可修改路径 -->
    <script type="text/babel" data-type="module">
        // 固定核心库引入, client.js?{token} token 是32位，你的任何调整都会导致类库加载失败
        import iToolX, { iUpload, iUtils, iEmit } from "http://a72dfc24ac69ccae7cf363c09e192c19.editor.aibot.gasgoo.com/editor-ui/client.js?a72dfc24ac69ccae7cf363c09e192c19";
        import clientState from "/pages/clientState.js";

        // 从MUI导入所需组件
        const { 
            Button, 
            Card, 
            CardContent, 
            CardHeader, 
            Typography,
            Table,
            TableBody,
            TableCell,
            TableContainer,
            TableHead,
            TableRow,
            Paper,
            TextField,
            Select,
            MenuItem,
            FormControl,
            InputLabel,
            Dialog,
            DialogActions,
            DialogContent,
            DialogTitle,
            IconButton,
            Box,
            Grid,
            Chip,
            Pagination,
            CircularProgress,
            Alert,
            Snackbar,
            Tabs,
            Tab,
            Checkbox,
            FormControlLabel,
            TextareaAutosize,
            Divider
        } = MaterialUI;

        // 创建React组件
        function ContentPoolManagement() {
            // 状态管理
            const [contentPoolList, setContentPoolList] = React.useState([]);
            const [loading, setLoading] = React.useState(false);
            const [total, setTotal] = React.useState(0);
            const [page, setPage] = React.useState(1);
            const [pageSize, setPageSize] = React.useState(10);
            const [filters, setFilters] = React.useState({
                sourceId: '',
                contentType: ''
            });
            const [openDialog, setOpenDialog] = React.useState(false);
            const [dialogType, setDialogType] = React.useState(''); // view, approve, reject, batchApprove, batchReject, preview
            const [currentItem, setCurrentItem] = React.useState(null);
            const [templates, setTemplates] = React.useState([]);
            const [sources, setSources] = React.useState([]);
            const [contents, setContents] = React.useState([]);
            const [snackbar, setSnackbar] = React.useState({
                open: false,
                message: '',
                severity: 'success'
            });
            const [selectedItems, setSelectedItems] = React.useState([]);
            const [rejectReason, setRejectReason] = React.useState('');
            const [selectAll, setSelectAll] = React.useState(false);
            const [previewData, setPreviewData] = React.useState({
                contentDetail: null,
                templateDetail: null,
                generatedContent: '',
                generatedTitle: ''
            });
            const [previewLoading, setPreviewLoading] = React.useState(false);

            // 内容类型选项
            const contentTypeOptions = [
                { value: 'short', label: '短文' },
                { value: 'medium', label: '中长文' },
                { value: 'long', label: '长文' }
            ];

            // 加载内容池列表
            const loadContentPoolList = async () => {
                setLoading(true);
                try {
                    const response = await iToolX.modules.contentPoolManager.getContentPoolList(
                        filters.sourceId || undefined,
                        undefined, // 移除格式筛选
                        page,
                        pageSize
                    );
                    
                    if (response.code !== 200) {
                        throw new Error(response.message);
                    }
                    
                    // 根据内容类型??选
                    let filteredList = response.data.list;
                    if (filters.contentType !== '') {
                        filteredList = filteredList.filter(item => item.content_type === filters.contentType);
                    }
                    
                    setContentPoolList(filteredList);
                    setTotal(response.data.total);
                } catch (error) {
                    console.error('加载内容池列表失败:', error);
                    showSnackbar('加载内容池列表失败: ' + error.message, 'error');
                } finally {
                    setLoading(false);
                }
            };

            // 加载模板列表
            const loadTemplates = async () => {
                try {
                    const response = await iToolX.modules.promptTemplateManager.getTemplateList('', 1, 100);
                    if (response.code === 200) {
                        setTemplates(response.data.list);
                    }
                } catch (error) {
                    console.error('加载模板列表失败:', error);
                }
            };

            // 加载抓取源列表
            const loadSources = async () => {
                try {
                    const response = await iToolX.modules.sourceManager.getSourceList('', null, 1, 100);
                    if (response.code === 200) {
                        setSources(response.data.list);
                    }
                } catch (error) {
                    console.error('加载抓取源列表失败:', error);
                }
            };

            // 加载内容列表
            const loadContents = async () => {
                try {
                    const response = await iToolX.modules.contentManager.getContentList('', '', null, 1, 100);
                    if (response.code === 200) {
                        setContents(response.data.list);
                    }
                } catch (error) {
                    console.error('加载内容列表失败:', error);
                }
            };

            // 获取内容详情
            const getContentDetail = async (contentId) => {
                try {
                    const response = await iToolX.modules.contentManager.getContentDetail(contentId);
                    if (response.code === 200) {
                        return response.data;
                    }
                    return null;
                } catch (error) {
                    console.error('获取内容详情失败:', error);
                    return null;
                }
            };

            // 获取模板详情
            const getTemplateDetail = async (templateId) => {
                try {
                    const response = await iToolX.modules.promptTemplateManager.getTemplateDetail(templateId);
                    if (response.code === 200) {
                        return response.data;
                    }
                    return null;
                } catch (error) {
                    console.error('获取模板详情失败:', error);
                    return null;
                }
            };

            // 获取内容池详情
            const getContentPoolDetail = async (id) => {
                try {
                    const response = await iToolX.modules.contentPoolManager.getContentPoolDetail(id);
                    if (response.code === 200) {
                        return response.data;
                    }
                    return null;
                } catch (error) {
                    console.error('获取内容池详情失败:', error);
                    return null;
                }
            };

            // 显示提示消息
            const showSnackbar = (message, severity = 'success') => {
                setSnackbar({
                    open: true,
                    message,
                    severity
                });
            };

            // 关闭提示消息
            const handleCloseSnackbar = () => {
                setSnackbar({
                    ...snackbar,
                    open: false
                });
            };

            // 处理筛选条件变化
            const handleFilterChange = (e) => {
                const { name, value } = e.target;
                setFilters({
                    ...filters,
                    [name]: value
                });
            };

            // 应用筛选条件
            const applyFilters = () => {
                setPage(1);
                setSelectedItems([]);
                setSelectAll(false);
                loadContentPoolList();
            };

            // 重置筛选条件
            const resetFilters = () => {
                setFilters({
                    sourceId: '',
                    contentType: ''
                });
                setPage(1);
                setSelectedItems([]);
                setSelectAll(false);
                loadContentPoolList();
            };

            // 打开对话框
            const handleOpenDialog = async (type, item = null) => {
                setDialogType(type);
                setCurrentItem(item);
                setRejectReason('');
                
                if (type === 'preview' && item) {
                    setPreviewLoading(true);
                    try {
                        // 并行获取内容池详情、内容详情和模板详情
                        const [contentPoolDetail, contentDetail, templateDetail] = await Promise.all([
                            getContentPoolDetail(item.id),
                            getContentDetail(item.content_id),
                            getTemplateDetail(item.template_id)
                        ]);
                        
                        // 从data字段中提取AI生成的内容和标题
                        let generatedContent = '';
                        let generatedTitle = '';
                        if (item && item.data) {
                            try {
                                const data = JSON.parse(item.data);
                                generatedContent = data.content || '无生成内容';
                                generatedTitle = data.title || '无标题';
                            } catch (e) {
                                generatedContent = '解析内容失败';
                                generatedTitle = '解析标题失败';
                            }
                        } else {
                            generatedContent = '无生成内容';
                            generatedTitle = '无标题';
                        }
                        
                        setPreviewData({
                            contentDetail,
                            templateDetail,
                            generatedContent,
                            generatedTitle
                        });
                    } catch (error) {
                        console.error('加载预览数据失败:', error);
                        showSnackbar('加载预览数据失败: ' + error.message, 'error');
                    } finally {
                        setPreviewLoading(false);
                    }
                }
                
                setOpenDialog(true);
            };

            // 关闭对话框
            const handleCloseDialog = () => {
                setOpenDialog(false);
                setRejectReason('');
                setPreviewData({
                    contentDetail: null,
                    templateDetail: null,
                    generatedContent: '',
                    generatedTitle: ''
                });
            };

            // 删除内容池项
            const handleDelete = async (id) => {
                if (!window.confirm('确定要删除此项吗？')) {
                    return;
                }
                
                try {
                    const response = await iToolX.modules.contentPoolManager.deleteContentPool(id);
                    if (response.code !== 200) {
                        throw new Error(response.message);
                    }
                    
                    showSnackbar('删除成功');
                    loadContentPoolList();
                } catch (error) {
                    console.error('删除失败:', error);
                    showSnackbar('删除失败: ' + error.message, 'error');
                }
            };

            // 审核通过内容
            const handleApprove = async (id) => {
                try {
                    const response = await iToolX.modules.contentPoolManager.approveContent(id);
                    if (response.code !== 200) {
                        throw new Error(response.message);
                    }
                    
                    showSnackbar('审核通过成功');
                    loadContentPoolList();
                } catch (error) {
                    console.error('审核通过失败:', error);
                    showSnackbar('审核通过失败: ' + error.message, 'error');
                }
            };

            // 审核拒绝内容
            const handleReject = async (id, reason) => {
                if (!reason || reason.trim() === '') {
                    showSnackbar('请输入拒绝原因', 'error');
                    return;
                }
                
                try {
                    const response = await iToolX.modules.contentPoolManager.rejectContent(id, reason);
                    if (response.code !== 200) {
                        throw new Error(response.message);
                    }
                    
                    showSnackbar('审核拒绝成功');
                    loadContentPoolList();
                } catch (error) {
                    console.error('审核拒绝失败:', error);
                    showSnackbar('审核拒绝失败: ' + error.message, 'error');
                }
            };

            // 批量审核通过
            const handleBatchApprove = async () => {
                if (selectedItems.length === 0) {
                    showSnackbar('请选择要审核通过的内容', 'error');
                    return;
                }
                
                try {
                    for (const id of selectedItems) {
                        await iToolX.modules.contentPoolManager.approveContent(id);
                    }
                    
                    showSnackbar(`批量审核通过成功，共处理 ${selectedItems.length} 项`);
                    setSelectedItems([]);
                    setSelectAll(false);
                    loadContentPoolList();
                } catch (error) {
                    console.error('批量审核通过失败:', error);
                    showSnackbar('批量审核通过失败: ' + error.message, 'error');
                }
            };

            // 批量审核拒绝
            const handleBatchReject = async () => {
                if (selectedItems.length === 0) {
                    showSnackbar('请选择要审核拒绝的内容', 'error');
                    return;
                }
                
                setDialogType('batchReject');
                setOpenDialog(true);
            };

            // 确认批量审核拒绝
            const confirmBatchReject = async () => {
                if (!rejectReason || rejectReason.trim() === '') {
                    showSnackbar('请输入拒绝原因', 'error');
                    return;
                }
                
                try {
                    for (const id of selectedItems) {
                        await iToolX.modules.contentPoolManager.rejectContent(id, rejectReason);
                    }
                    
                    showSnackbar(`批量审核拒绝成功，共处理 ${selectedItems.length} 项`);
                    setSelectedItems([]);
                    setSelectAll(false);
                    setRejectReason('');
                    setOpenDialog(false);
                    loadContentPoolList();
                } catch (error) {
                    console.error('批量审核拒绝失败:', error);
                    showSnackbar('批量审核拒绝失败: ' + error.message, 'error');
                }
            };

            // 处理分页变化
            const handlePageChange = (event, newPage) => {
                setPage(newPage);
            };

            // 处理选择项变化
            const handleSelectItem = (id) => {
                if (selectedItems.includes(id)) {
                    setSelectedItems(selectedItems.filter(item => item !== id));
                } else {
                    setSelectedItems([...selectedItems, id]);
                }
            };

            // 处理全选/取消全选
            const handleSelectAll = () => {
                if (selectAll) {
                    setSelectedItems([]);
                } else {
                    const allIds = contentPoolList.map(item => item.id);
                    setSelectedItems(allIds);
                }
                setSelectAll(!selectAll);
            };

            // 初始化加载数据
            React.useEffect(() => {
                loadContentPoolList();
                loadTemplates();
                loadSources();
                loadContents();
            }, [page, pageSize]);

            // 格式化状态标签
            const renderStatus = (status) => {
                const statusMap = {
                    0: { label: '待审核', color: '#FFA940' },
                    1: { label: '已通过', color: '#52C41A' },
                    4: { label: '已拒绝', color: '#FF4D4F' }
                };
                
                const statusInfo = statusMap[status] || { label: '未知', color: '#999999' };
                return (
                    <Chip 
                        label={statusInfo.label} 
                        style={{ 
                            backgroundColor: statusInfo.color + '20', 
                            color: statusInfo.color,
                            border: `1px solid ${statusInfo.color}`
                        }} 
                        size="small" 
                    />
                );
            };

            // 格式化内容类型标签
            const renderContentType = (type) => {
                const typeMap = {
                    'short': '短文',
                    'medium': '中长文',
                    'long': '长文'
                };
                return typeMap[type] || type;
            };

            // 格式化日期
            const formatDate = (dateString) => {
                if (!dateString) return '-';
                try {
                    const date = new Date(dateString);
                    if (isNaN(date.getTime())) {
                        return dateString; // 如果无法解析为日期，返回原始字符串
                    }
                    return date.toLocaleString();
                } catch (error) {
                    return dateString; // 如果解析出错，返回原始字符串
                }
            };

            // 获取内容标题
            const getContentTitle = (contentId) => {
                const content = contents.find(c => c.id === contentId);
                return content ? content.title : `内容ID: ${contentId}`;
            };

            // 获取模板标题
            const getTemplateTitle = (templateId) => {
                const template = templates.find(t => t.id === templateId);
                return template ? template.name : `模板ID: ${templateId}`;
            };

            // 渲染Markdown内容
            const renderMarkdown = (content) => {
                if (!content) return '无内容';
                
                // 简单的Markdown渲染（实际项目中可以使用专业的Markdown渲染库）
                return content
                    .replace(/^### (.*$)/gim, '<h3>$1</h3>')
                    .replace(/^## (.*$)/gim, '<h2>$1</h2>')
                    .replace(/^# (.*$)/gim, '<h1>$1</h1>')
                    .replace(/\*\*(.*)\*\*/gim, '<strong>$1</strong>')
                    .replace(/\*(.*)\*/gim, '<em>$1</em>')
                    .replace(/^\* (.*$)/gim, '<li>$1</li>')
                    .replace(/\n/gim, '<br>');
            };

            return (
                <div className="page-wrapper">
                    {/* 顶部导航 */}
                    <header className="header">
                        <div className="nav-container">
                            <a href="/pages/home.html" className="logo">
                                <div className="logo-icon">C</div>
                                <span>内容抓取与分析系统</span>
                            </a>
                            
                            <nav>
                                <ul className="nav-menu">
                                    <li className="nav-item">
                                        <a href="/pages/business/sources.html" className="nav-link">抓取源管理</a>
                                    </li>
                                    <li className="nav-item">
                                        <a href="/pages/business/contentManagement.html" className="nav-link">内容管理</a>
                                    </li>
                                    <li className="nav-item">
                                        <a href="/pages/business/analysisList.html" className="nav-link">分析管理</a>
                                    </li>
                                    <li className="nav-item">
                                        <a href="/pages/business/promptTemplateManagement.html" className="nav-link">提示词模板</a>
                                    </li>
                                    <li className="nav-item">
                                        <a href="/pages/business/contentPoolManagement.html" className="nav-link active">内容池管理</a>
                                    </li>
                                </ul>
                            </nav>
                            
                            <div className="nav-actions">
                                <div className="search-box">
                                    <span className="material-icons search-icon">search</span>
                                    <input type="text" className="search-input" placeholder="搜索..." />
                                </div>
                            </div>
                        </div>
                    </header>

                    {/* 主体内容 */}
                    <main className="main-content">
                        <div className="container">
                            <div className="card">
                                <div className="card-header">
                                    <h2 className="card-title">内容池管理</h2>
                                </div>
                                
                                <div className="card-body">
                                    {/* 筛选条件 */}
                                    <div className="filter-container">
                                        <div className="filter-header">
                                            <h3 className="filter-title">筛选条件</h3>
                                        </div>
                                        <div className="filter-body">
                                            <div className="filter-row">
                                                <div className="filter-col">
                                                    <FormControl fullWidth size="small">
                                                        <InputLabel>抓取源</InputLabel>
                                                        <Select
                                                            name="sourceId"
                                                            value={filters.sourceId}
                                                            onChange={handleFilterChange}
                                                            label="抓取源"
                                                        >
                                                            <MenuItem value="">全部</MenuItem>
                                                            {sources.map(source => (
                                                                <MenuItem key={source.id} value={source.id}>
                                                                    {source.site_title}
                                                                </MenuItem>
                                                            ))}
                                                        </Select>
                                                    </FormControl>
                                                </div>
                                                <div className="filter-col">
                                                    <FormControl fullWidth size="small">
                                                        <InputLabel>内容类型</InputLabel>
                                                        <Select
                                                            name="contentType"
                                                            value={filters.contentType}
                                                            onChange={handleFilterChange}
                                                            label="内容类型"
                                                        >
                                                            <MenuItem value="">全部</MenuItem>
                                                            {contentTypeOptions.map(option => (
                                                                <MenuItem key={option.value} value={option.value}>
                                                                    {option.label}
                                                                </MenuItem>
                                                            ))}
                                                        </Select>
                                                    </FormControl>
                                                </div>
                                            </div>
                                            <div className="filter-actions">
                                                <Button 
                                                    variant="contained" 
                                                    onClick={applyFilters}
                                                >
                                                    应用筛选
                                                </Button>
                                                <Button 
                                                    variant="outlined" 
                                                    onClick={resetFilters}
                                                >
                                                    重置
                                                </Button>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    {/* 批量操作 */}
                                    <div className="card" style={{ marginBottom: '20px' }}>
                                        <div className="card-header">
                                            <h3 className="card-title">批量操作</h3>
                                        </div>
                                        <div className="card-body">
                                            <div className="btn-group">
                                                <Button 
                                                    variant="contained" 
                                                    color="success"
                                                    startIcon={<span className="material-icons">check_circle</span>}
                                                    onClick={handleBatchApprove}
                                                    disabled={selectedItems.length === 0}
                                                >
                                                    批量通过 ({selectedItems.length})
                                                </Button>
                                                <Button 
                                                    variant="contained" 
                                                    color="error"
                                                    startIcon={<span className="material-icons">cancel</span>}
                                                    onClick={handleBatchReject}
                                                    disabled={selectedItems.length === 0}
                                                >
                                                    批量拒绝 ({selectedItems.length})
                                                </Button>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    {/* 数据表格 */}
                                    {loading ? (
                                        <div className="loading">
                                            <div className="loading-spinner"></div>
                                        </div>
                                    ) : (
                                        <>
                                            <div className="table-wrapper">
                                                <TableContainer component={Paper}>
                                                    <Table className="data-table">
                                                        <TableHead>
                                                            <TableRow>
                                                                <TableCell padding="checkbox">
                                                                    <Checkbox
                                                                        checked={selectAll}
                                                                        onChange={handleSelectAll}
                                                                    />
                                                                </TableCell>
                                                                <TableCell>ID</TableCell>
                                                                <TableCell>抓取源</TableCell>
                                                                <TableCell>内容标题</TableCell>
                                                                <TableCell>模板标题</TableCell>
                                                                <TableCell>内容类型</TableCell>
                                                                <TableCell>状态</TableCell>
                                                                <TableCell>创建时间</TableCell>
                                                                <TableCell>操作</TableCell>
                                                            </TableRow>
                                                        </TableHead>
                                                        <TableBody>
                                                            {contentPoolList.length > 0 ? (
                                                                contentPoolList.map(item => (
                                                                    <TableRow key={item.id}>
                                                                        <TableCell padding="checkbox">
                                                                            <Checkbox
                                                                                checked={selectedItems.includes(item.id)}
                                                                                onChange={() => handleSelectItem(item.id)}
                                                                            />
                                                                        </TableCell>
                                                                        <TableCell>{item.id}</TableCell>
                                                                        <TableCell>
                                                                            {sources.find(s => s.id === item.source_id)?.site_title || '未知'}
                                                                        </TableCell>
                                                                        <TableCell>
                                                                            {(() => {
                                                                                try {
                                                                                    const data = JSON.parse(item.data || '{}');
                                                                                    return data.title || item.content_title || getContentTitle(item.content_id);
                                                                                } catch (e) {
                                                                                    return item.content_title || getContentTitle(item.content_id);
                                                                                }
                                                                            })()}
                                                                        </TableCell>
                                                                        <TableCell>
                                                                            {getTemplateTitle(item.template_id)}
                                                                        </TableCell>
                                                                        <TableCell>{renderContentType(item.content_type)}</TableCell>
                                                                        <TableCell>{renderStatus(item.status)}</TableCell>
                                                                        <TableCell>
                                                                            {formatDate(item.create_time)}
                                                                        </TableCell>
                                                                        <TableCell>
                                                                            <IconButton 
                                                                                size="small" 
                                                                                onClick={() => handleOpenDialog('preview', item)}
                                                                                title="预览内容"
                                                                                color="primary"
                                                                            >
                                                                                <span className="material-icons">article</span>
                                                                            </IconButton>
                                                                            {item.status === 0 && (
                                                                                <>
                                                                                    <IconButton 
                                                                                        size="small" 
                                                                                        onClick={() => handleApprove(item.id)}
                                                                                        title="审核通过"
                                                                                        color="success"
                                                                                    >
                                                                                        <span className="material-icons">check_circle</span>
                                                                                    </IconButton>
                                                                                    <IconButton 
                                                                                        size="small" 
                                                                                        onClick={() => {
                                                                                            setCurrentItem(item);
                                                                                            setDialogType('reject');
                                                                                            setOpenDialog(true);
                                                                                        }}
                                                                                        title="审核拒绝"
                                                                                        color="error"
                                                                                    >
                                                                                        <span className="material-icons">cancel</span>
                                                                                    </IconButton>
                                                                                </>
                                                                            )}
                                                                            <IconButton 
                                                                                size="small" 
                                                                                onClick={() => handleDelete(item.id)}
                                                                                title="删除"
                                                                                style={{ color: '#FF7D00' }}
                                                                            >
                                                                                <span className="material-icons">delete</span>
                                                                            </IconButton>
                                                                        </TableCell>
                                                                    </TableRow>
                                                                ))
                                                            ) : (
                                                                <TableRow>
                                                                    <TableCell colSpan={10} align="center">
                                                                        <div className="empty-state">
                                                                            <span className="material-icons empty-icon">inbox</span>
                                                                            <p className="empty-text">暂无数据</p>
                                                                        </div>
                                                                    </TableCell>
                                                                </TableRow>
                                                            )}
                                                        </TableBody>
                                                    </Table>
                                                </TableContainer>
                                            </div>
                                            
                                            {/* 分页 */}
                                            {total > 0 && (
                                                <div className="pagination">
                                                    <Pagination 
                                                        count={Math.ceil(total / pageSize)} 
                                                        page={page} 
                                                        onChange={handlePageChange}
                                                        color="primary"
                                                    />
                                                </div>
                                            )}
                                        </>
                                    )}
                                </div>
                            </div>
                        </div>
                    </main>

                    {/* 底部页脚 */}
                    <footer className="footer">
                        <div className="footer-content">
                            <ul className="footer-links">
                                <li><a href="#">关于我们</a></li>
                                <li><a href="#">使用帮助</a></li>
                                <li><a href="#">隐私政策</a></li>
                                <li><a href="#">服务条款</a></li>
                            </ul>
                            <div className="footer-copyright">
                                ? 2023 内容抓取与分析系统. 保留所有权利.
                            </div>
                        </div>
                    </footer>

                    {/* 对话框 */}
                    <Dialog open={openDialog} onClose={handleCloseDialog} maxWidth={dialogType === 'preview' ? 'lg' : 'md'} fullWidth>
                        <DialogTitle>
                            {dialogType === 'preview' && '内容预览'}
                            {dialogType === 'reject' && '审核拒绝'}
                            {dialogType === 'batchReject' && '批量审核拒绝'}
                        </DialogTitle>
                        <DialogContent>
                            {dialogType === 'preview' && (
                                <div>
                                    {previewLoading ? (
                                        <div style={{ display: 'flex', justifyContent: 'center', padding: '40px' }}>
                                            <CircularProgress />
                                        </div>
                                    ) : (
                                        <Grid container spacing={2}>
                                            {/* 左侧：基础信息 */}
                                            <Grid item xs={5}>
                                                <Typography variant="h6" gutterBottom>基础信息</Typography>
                                                <Divider style={{ marginBottom: '16px' }} />
                                                
                                                <Grid container spacing={1}>
                                                    <Grid item xs={4}>
                                                        <Typography variant="subtitle2" color="textSecondary">ID:</Typography>
                                                    </Grid>
                                                    <Grid item xs={8}>
                                                        <Typography>{currentItem?.id}</Typography>
                                                    </Grid>
                                                    
                                                    <Grid item xs={4}>
                                                        <Typography variant="subtitle2" color="textSecondary">抓取源:</Typography>
                                                    </Grid>
                                                    <Grid item xs={8}>
                                                        <Typography>{sources.find(s => s.id === currentItem?.source_id)?.site_title || '未知'}</Typography>
                                                    </Grid>
                                                    
                                                    <Grid item xs={4}>
                                                        <Typography variant="subtitle2" color="textSecondary">内容类型:</Typography>
                                                    </Grid>
                                                    <Grid item xs={8}>
                                                        <Typography>{renderContentType(currentItem?.content_type)}</Typography>
                                                    </Grid>
                                                    
                                                    <Grid item xs={4}>
                                                        <Typography variant="subtitle2" color="textSecondary">状态:</Typography>
                                                    </Grid>
                                                    <Grid item xs={8}>
                                                        {renderStatus(currentItem?.status)}
                                                    </Grid>
                                                    
                                                    <Grid item xs={4}>
                                                        <Typography variant="subtitle2" color="textSecondary">创建时间:</Typography>
                                                    </Grid>
                                                    <Grid item xs={8}>
                                                        <Typography>{formatDate(currentItem?.create_at)}</Typography>
                                                    </Grid>
                                                    
                                                    <Grid item xs={12}>
                                                        <Typography variant="h6" gutterBottom style={{ marginTop: '16px' }}>原始内容</Typography>
                                                        <Divider style={{ marginBottom: '8px' }} />
                                                        <Typography variant="subtitle2" color="textSecondary">标题:</Typography>
                                                        <Typography style={{ marginBottom: '8px' }}>
                                                            {previewData.contentDetail?.title || '未知'}
                                                        </Typography>
                                                        <Typography variant="subtitle2" color="textSecondary">内容:</Typography>
                                                        <Typography 
                                                            variant="body2" 
                                                            style={{ 
                                                                maxHeight: '200px', 
                                                                overflow: 'auto',
                                                                backgroundColor: '#f5f5f5',
                                                                padding: '8px',
                                                                borderRadius: '4px'
                                                            }}
                                                        >
                                                            {previewData.contentDetail?.content || '无内容'}
                                                        </Typography>
                                                    </Grid>
                                                    
                                                    <Grid item xs={12}>
                                                        <Typography variant="h6" gutterBottom style={{ marginTop: '16px' }}>模板信息</Typography>
                                                        <Divider style={{ marginBottom: '8px' }} />
                                                        <Typography variant="subtitle2" color="textSecondary">名称:</Typography>
                                                        <Typography style={{ marginBottom: '8px' }}>
                                                            {previewData.templateDetail?.name || '未知'}
                                                        </Typography>
                                                        <Typography variant="subtitle2" color="textSecondary">描述:</Typography>
                                                        <Typography 
                                                            variant="body2" 
                                                            style={{ 
                                                                maxHeight: '150px', 
                                                                overflow: 'auto',
                                                                backgroundColor: '#f5f5f5',
                                                                padding: '8px',
                                                                borderRadius: '4px'
                                                            }}
                                                        >
                                                            {previewData.templateDetail?.description || '无描述'}
                                                        </Typography>
                                                    </Grid>
                                                </Grid>
                                            </Grid>
                                            
                                            {/* 右侧：AI生成的内容详情 */}
                                            <Grid item xs={7}>
                                                <Typography variant="h6" gutterBottom>AI生成的内容详情</Typography>
                                                <Divider style={{ marginBottom: '16px' }} />
                                                
                                                {/* 显示标题 */}
                                                <Typography variant="h5" gutterBottom style={{ color: '#165DFF', fontWeight: 'bold' }}>
                                                    {previewData.generatedTitle}
                                                </Typography>
                                                
                                                {/* 显示内容 */}
                                                <Box 
                                                    sx={{ 
                                                        backgroundColor: '#f5f5f5', 
                                                        padding: '16px', 
                                                        borderRadius: '4px',
                                                        maxHeight: '600px',
                                                        overflow: 'auto'
                                                    }}
                                                >
                                                    <div 
                                                        dangerouslySetInnerHTML={{ 
                                                            __html: renderMarkdown(previewData.generatedContent) 
                                                        }} 
                                                    />
                                                </Box>
                                            </Grid>
                                        </Grid>
                                    )}
                                </div>
                            )}
                            
                            {(dialogType === 'reject' || dialogType === 'batchReject') && (
                                <div>
                                    <Grid container spacing={2}>
                                        <Grid item xs={12}>
                                            <Typography variant="subtitle1">
                                                {dialogType === 'reject' ? '请输入拒绝原因' : `请输入批量拒绝原因 (${selectedItems.length}项)`}
                                            </Typography>
                                            <TextareaAutosize
                                                minRows={4}
                                                placeholder="请输入拒绝原因..."
                                                value={rejectReason}
                                                onChange={(e) => setRejectReason(e.target.value)}
                                                style={{ width: '100%', padding: '10px', marginTop: '10px' }}
                                            />
                                        </Grid>
                                    </Grid>
                                </div>
                            )}
                        </DialogContent>
                        <DialogActions>
                            <Button onClick={handleCloseDialog}>取消</Button>
                            {dialogType === 'reject' && currentItem && (
                                <Button 
                                    onClick={() => handleReject(currentItem.id, rejectReason)} 
                                    variant="contained" 
                                    color="error"
                                >
                                    确认拒绝
                                </Button>
                            )}
                            {dialogType === 'batchReject' && (
                                <Button 
                                    onClick={confirmBatchReject} 
                                    variant="contained" 
                                    color="error"
                                >
                                    确认批量拒绝
                                </Button>
                            )}
                        </DialogActions>
                    </Dialog>

                    {/* 提示消息 */}
                    <Snackbar
                        open={snackbar.open}
                        autoHideDuration={6000}
                        onClose={handleCloseSnackbar}
                    >
                        <Alert 
                            onClose={handleCloseSnackbar} 
                            severity={snackbar.severity}
                            variant="filled"
                        >
                            {snackbar.message}
                        </Alert>
                    </Snackbar>
                </div>
            );
        }

        // 渲染组件到页面
        const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(<ContentPoolManagement />);
    </script>
</body>

</html>